<%@ include file="../../common/includes/include-taglibs.jsp" %>

<html>
<head>
   <title>Texas Hold'em</title>
   <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
   <META HTTP-EQUIV="Cache-Control" CONTENT="max-age=0">
   <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
   <meta http-equiv="expires" content="0">
   <META HTTP-EQUIV="Expires" CONTENT="Tue, 01 Jan 1980 1:00:00 GMT">
   <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
   <base href="<%=request.getContextPath()%>"/>
   <%--<link rel="stylesheet" type="text/css" src="<%=request.getContextPath()%>/poker-views/css/poker.css"/>--%>
   <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/poker-views/css/poker.css"
         media="screen"/>

   <script type="text/javascript">
      var cardSources = new Array();
      var cardSourcesIndex = 0;
      function addCard(imageElement)
      {
         if (imageElement.alt != "bfv.png")
         {
            cardSources[cardSourcesIndex] = imageElement.src;
            imageElement.src = "/jeubelix/poker-views/gfx/bfv.png";
            imageElement.alt = "bfv.png";
            cardSourcesIndex++;
            showCards();
         }
      }

      function showCards()
      {
         var selectedCardsElement = document.getElementById('selectedCards');
         var selectedImagesHtml = '<table cellpadding="0" cellspacing="5" border="0">';
         for (var i = 0; i < cardSourcesIndex; i++)
         {
            selectedImagesHtml += '<td  >';
            selectedImagesHtml += '<img className="communityCards" src="' + cardSources[i] + '" id="card' + i + '" />';
            selectedImagesHtml += '</td>';
         }
         selectedCardsElement.innerHTML = selectedImagesHtml;
      }

      function submitCard(imageName)
      {
         var selectedCardNameInputFieldElement = document.getElementById('selectedCardNameInputField');
         selectedCardNameInputFieldElement.value = imageName;

      }
   </script>
</head>

<body>
<div id="allCards" class="allCards">
   <table id="cardDeck" class="cardDeck">
      <tr id="cardSuite<c:out value="${status.index}"/>" class="cardSuite">
         <c:forEach items="${standardDeck.allCards}" var="card" varStatus="status">
         <td>
            <div id="card<c:out value="${status.index}"/>" class="card<c:out value="${status.index}"/>">
               <img class="miniPlayingCard"
                    src="<%=request.getContextPath()%>/poker-views/gfx/<c:out value="${card.imageFileName}"/>"
                    alt="<c:out value="${card.imageFileName}"/>"
                    onclick="javascript:submitCard(${card.imageName})"
                       />
                  <%-- onclick="javascript:addCard(this)" --%>

            </div>
         </td>
         <c:if test="${status.index==12}">
      </tr>
      <tr id="cardSuite<c:out value="${status.index}"/>" class="cardSuite">
         </c:if>
         <c:if test="${status.index==25}">
      </tr>
      <tr id="cardSuite<c:out value="${status.index}"/>" class="cardSuite">
         </c:if>
         <c:if test="${status.index==38}">
      </tr>
      <tr id="cardSuite<c:out value="${status.index}"/>" class="cardSuite">
         </c:if>
         </c:forEach>
      </tr>
   </table>
</div>

<div id="selectedCards" class="selectedCards">

</div>


<div id="controls" class="controls">
</div>

<div id="hiddenForm">
   <form action="<%=request.getContextPath()%>/poker/odds" method="post">
      <input id="selectedCardNameInputField" type="hidden" name="selectedCardName" value=""/>
   </form>
</div>
<%@ include file="includes/bottom.jsp" %>
</body>
</html>
